<template>
  <div class="container">
    <div class="left">
      <div class="top">您的预定</div>
      <div class="bottom">
        <p>行政客房</p>
        <p>标准房价</p>
        <p>一张特大床</p>
        <p>平均房价 CNY 2,250.00</p>
      </div>
    </div>
    <div class="right">
      <div style="text-align:center;font-size:16px;margin:10px 0 20px 0">确认住宿</div>
      <table style="width:100%;margin-top:30px">
        <tr style="color:white;font-size:13px">
          <td colspan="2" style="text-align:center;background-color:gray">宾客详情</td>
          <td></td>
        </tr>
        <tr>
          <td>名字*</td>
          <td><input type="text" style="width:98%"></td>
        </tr>
        <tr>
          <td>姓氏*</td>
          <td><input type="text" style="width:98%"></td>
        </tr>
        <tr>
          <td>电话号码*</td>
          <td><input type="text" style="width:98%"></td>
        </tr>
        <tr>
          <td>电子邮件地址*</td>
          <td><input type="text" style="width:98%"></td>
        </tr>
        <tr>
          <td>确定电邮地址*</td>
          <td><input type="text" style="width:98%"></td>
        </tr>
        <tr>
          <td>国家/地区*</td>
          <td><input type="text" style="width:98%"></td>
        </tr>
      </table>
    </div>

  </div>
</template>

<script>
  export default {
    
  }
</script>

<style lang="scss" scoped>
.container{
  width: 80%;
  margin: 0 auto;
}
.bottom{
  // display: flex;
  display: inline-block;
}
.bottom p{
    display: block;
    padding: 5px;
    font-size: 12px;
}
.top{
  padding-bottom: 40px;
  padding-top: 10px;
  // border-bottom: 1px solid lightgrey;

}
.left{
  width: 25%;
  padding-left: 10px;
  margin-top: 55px;
  background-color: lightgrey;
  float: left;
}
.right{
  width: 55%;
  float: left;
  text-align: center;
  display: flex;
  flex-direction: column;
  display: inline-block;
  margin-left: 40px;
  margin-bottom: 40px;
}
table,tr,td{
  border: 1px solid black;
  width: 100%;
}
table tr td:nth-child(1){
  width: 25%;
  font-size: 12px;
  padding: 5px;
  text-align: left;
  background-color: lightgray;
}
</style>